Skip to content

Conversation

@Nowely
Copy link
Owner

@Nowely Nowely commented Nov 27, 2025

Summary

  • Add new packages/website documentation site built with Astro Starlight
  • Migrate detailed documentation from README.md to the website
  • Configure Vercel deployment for both website and storybook as separate projects
  • Fix overlay position from absolute to fixed in core styles

Changes

  • New package: packages/website - comprehensive documentation with:

    • Getting Started guide with interactive demos
    • API reference (auto-generated via TypeDoc)
    • Guides for configuration, dynamic marks, nested marks, overlays, and more
    • Examples: mentions, slash commands, hashtags, markdown editor
  • README.md: Simplified to essentials with link to full documentation

  • Vercel: Moved config to packages/storybook/vercel.json, added @astrojs/vercel adapter for website

  • Minor fixes:

    • packages/core/styles.css: Changed overlay position to fixed
    • packages/markput/src/types.ts: Refactored ConfiguredMarkedInput type to interface

### Summary
- Introduced a new `website` package configured with Astro and Tailwind CSS.
- Added essential files including `astro.config.mjs`, `package.json`, and `.gitignore`.
- Implemented a basic structure for documentation with example guides and reference pages.
- Included global styles and assets for the website.

### Key Changes
1. **Configuration**: Set up `astro.config.mjs` for Astro with Starlight and Tailwind integration.
2. **Documentation**: Created initial content structure with example guides and reference documentation.
3. **Assets**: Added favicon and example image assets.
4. **TypeScript Support**: Configured TypeScript with a strict setup.

### Benefits
- Provides a foundation for building a documentation site using Astro and Tailwind.
- Enhances developer experience with a structured approach to content management.
### Summary
- Updated the README.md to include a link to the documentation and improved the introduction.
- Modified the astro.config.mjs to reflect the new project title and updated social links.
- Created new documentation pages for installation, getting started, configuration, dynamic marks, nested marks, overlay, and slots.
- Removed the outdated example guide and reference pages.

### Key Changes
1. **Documentation**: Enhanced the README and added comprehensive guides for users.
2. **Configuration**: Updated the Astro configuration to align with the new project branding.
3. **New Guides**: Introduced multiple guides to facilitate user onboarding and feature exploration.
4. **Removed Obsolete Content**: Deleted the example guide to streamline documentation.

### Benefits
- Provides clearer guidance for users on how to use the Marked Input component effectively.
- Improves the overall structure and accessibility of the documentation.
### Summary
- Changed project title from "Marked Input" to "Markput" in the configuration.
- Updated GitHub link to the new repository.
- Revised documentation title and description to reflect the new branding.
- Enhanced hero section with a new tagline and image.

### Key Changes
1. **Configuration**: Updated `astro.config.mjs` to reflect the new project name and social links.
2. **Documentation**: Modified the main documentation page to introduce Markput and provide a clearer starting point for users.
3. **Visuals**: Added a new image to the hero section for improved visual appeal.

### Benefits
- Aligns project branding with the new name, enhancing recognition.
- Provides a more engaging introduction for users exploring the documentation.
### Summary
- Introduced a new sidebar section in the Astro configuration for improved navigation.
- Created new documentation pages for installation, getting started, features, and API reference.
- Updated links in the main documentation to reflect the new structure.

### Key Changes
1. **Configuration**: Updated `astro.config.mjs` to include an "Introduction" section in the sidebar.
2. **Documentation**: Added comprehensive guides for installation, getting started, features, and API reference to enhance user onboarding.
3. **Link Updates**: Modified links in the main documentation to point to the new introduction pages.

### Benefits
- Provides a clearer and more organized documentation structure for users.
- Facilitates easier navigation and access to essential information about Markput.
### Summary
- Introduced a new documentation plan outlining phases for rewriting and enhancing the documentation.
- Created multiple new documentation pages covering core concepts, advanced topics, API references, and examples.
- Updated the Astro configuration to improve navigation and organization of the documentation site.

### Key Changes
1. **Documentation Structure**: Established a clear plan with phases for critical fixes, getting started guides, advanced topics, and supporting materials.
2. **New Pages**: Added detailed guides on accessibility, architecture, performance optimization, custom parsers, and more.
3. **Configuration Updates**: Enhanced the `astro.config.mjs` to include new sections and improve user navigation.

### Benefits
- Provides a structured and comprehensive resource for users to understand and utilize Markput effectively.
- Enhances the onboarding experience with clear, organized, and accessible documentation.
…entation rewrite have been completed. This includes critical fixes, getting started guides, advanced topics, examples, API references, and supporting materials. The documentation is now fully structured and comprehensive, enhancing user onboarding and accessibility.
### Summary
- Added a `version: 1.0.0` field to multiple documentation files, ensuring consistency across guides, API references, and examples.

### Key Changes
1. **Versioning**: Introduced versioning to enhance clarity and track changes in documentation.
2. **Documentation Updates**: Updated various guides and examples to reflect the new versioning structure.

### Benefits
- Provides users with clear version information, improving the overall documentation experience.
### Summary
- Streamlined the performance optimization guide for Markput applications.
- Consolidated performance metrics and common bottlenecks into a more structured format.
- Enhanced optimization strategies with clearer examples and code snippets.

### Key Changes
1. **Performance Overview**: Simplified the baseline performance section and removed redundant details.
2. **Optimization Strategies**: Organized strategies into distinct sections with practical code examples.
3. **Documentation Clarity**: Improved readability and accessibility of the performance guide.

### Benefits
- Provides users with a clearer understanding of performance optimization techniques.
- Facilitates easier implementation of strategies in Markput applications.
### Summary
- Expanded the performance optimization guide with detailed strategies and code examples.
- Structured the content into clear sections for baseline performance, bottlenecks, and optimization techniques.
- Included practical solutions for common performance issues, such as debouncing and memoization.

### Key Changes
1. **Performance Overview**: Improved clarity and organization of baseline performance metrics.
2. **Bottlenecks and Solutions**: Identified common performance bottlenecks and provided actionable solutions.
3. **Code Examples**: Added comprehensive code snippets to illustrate optimization strategies effectively.

### Benefits
- Offers users a more thorough understanding of performance optimization techniques.
- Facilitates easier implementation of strategies to enhance application performance.
### Summary
- Transformed the README.md into a comprehensive documentation site for Markput, utilizing Astro and Starlight.
- Expanded content to include detailed sections on the tech stack, project structure, commands, content development guidelines, and styling practices.
- Enhanced organization and clarity for users, providing a structured approach to documentation.

### Key Changes
1. **Tech Stack Overview**: Introduced sections detailing the Astro framework, Starlight documentation framework, and Tailwind CSS.
2. **Project Structure**: Clearly outlined the directory structure and purpose of key files and folders.
3. **Commands and Guidelines**: Added commands for project management and detailed content development guidelines, including frontmatter schema and image handling.

### Benefits
- Offers users a well-structured and informative resource for understanding and utilizing Markput effectively.
- Improves onboarding experience with clear navigation and comprehensive documentation.
### Summary
- Replaced outdated guides with new content, including a "Getting Started" guide and a "Why Markput?" overview.
- Removed obsolete documentation files such as the accessibility and custom parsers guides.
- Enhanced the Astro configuration to reflect the updated documentation structure and improve navigation.

### Key Changes
1. **New Guides**: Introduced "Getting Started" and "Why Markput?" to provide users with essential information and context.
2. **Content Removal**: Deleted outdated guides to streamline documentation and focus on relevant topics.
3. **Configuration Updates**: Adjusted `astro.config.mjs` to support the new documentation layout.

### Benefits
- Offers users a clearer and more engaging introduction to Markput.
- Improves the overall organization and accessibility of the documentation resources.
### Summary
- Upgraded versions of several key dependencies in the `package.json` file for the website project.

### Key Changes
1. **@tailwindcss/vite**: Updated from `^4.0.7` to `^4.1.17`.
2. **astro**: Updated from `^5.6.1` to `^5.16.0`.
3. **sharp**: Updated from `^0.34.2` to `^0.34.5`.
4. **tailwindcss**: Updated from `^4.0.7` to `^4.1.17`.

### Benefits
- Ensures the project utilizes the latest features and improvements from the updated dependencies, enhancing performance and compatibility.
### Summary
- Enhanced the documentation structure by adding new API references and type definitions.
- Updated the Astro configuration to integrate the Starlight TypeDoc plugin for improved API documentation generation.
- Removed outdated API documentation files and replaced them with a new structured format.

### Key Changes
1. **New API Documentation**: Introduced comprehensive API references for various components, functions, and types.
2. **Astro Configuration**: Integrated Starlight TypeDoc for automatic generation of API documentation.
3. **Content Cleanup**: Deleted obsolete documentation files to streamline the content and focus on relevant information.

### Benefits
- Provides users with a more organized and accessible API reference.
- Improves the overall documentation experience by ensuring up-to-date and relevant content.
### Summary
- Updated API documentation for various functions and interfaces to improve clarity and consistency.
- Enhanced the Astro configuration to include new TypeDoc settings for better documentation generation.

### Key Changes
1. **API Documentation**: Reformatted function signatures and parameters for better readability and understanding.
2. **Astro Configuration**: Added TypeDoc options for improved API reference generation.

### Benefits
- Provides users with clearer and more structured API documentation.
- Improves the overall documentation experience by ensuring consistency and clarity across all references.
…on for development

### Summary
- Deleted the RFC for Nested Marks and the Architecture and Performance documentation files to streamline content.
- Updated the Astro configuration to include a new development section for better organization of documentation.

### Key Changes
1. **File Removals**: Removed obsolete RFC and advanced documentation files to focus on relevant content.
2. **Astro Configuration**: Adjusted the configuration to reflect the new structure, adding a development section for easier access to ongoing work.

### Benefits
- Enhances the clarity and relevance of the documentation by removing outdated materials.
- Improves navigation and organization within the documentation site for developers.
…idebar management

### Summary
- Deleted the old `astro.config.mjs` file and created a new `astro.config.ts` file to improve type safety and maintainability.
- Introduced a sidebar configuration with a work-in-progress badge for better visibility of ongoing documentation efforts.
- Implemented a filtering function to manage sidebar items based on the development environment.

### Key Changes
1. **File Replacement**: Transitioned from JavaScript to TypeScript for the Astro configuration.
2. **Sidebar Enhancements**: Added a structured sidebar configuration with badges for clarity on documentation status.
3. **Dynamic Filtering**: Implemented logic to conditionally display development items based on the environment.

### Benefits
- Improves code quality and maintainability through TypeScript usage.
- Enhances user experience by clearly indicating the status of documentation items.
- Streamlines the sidebar management for better organization of content.
…revision to TypeDoc configuration

### Summary
- Updated various documentation files to change links from the current commit to the 'next' branch for better version tracking.
- Added a `gitRevision: 'next'` entry in the TypeDoc configuration to ensure accurate versioning in generated documentation.

### Key Changes
1. **Link Updates**: Modified links in multiple API documentation files to reflect the 'next' branch.
2. **TypeDoc Configuration**: Enhanced TypeDoc settings to include the current git revision for improved documentation accuracy.

### Benefits
- Ensures that documentation links remain relevant and point to the latest version.
- Improves the clarity and accuracy of the API documentation by including versioning information.
### Summary
- Removed the outdated FAQ documentation file to streamline content.
- Introduced a new Comparisons guide to provide users with insights on how Markput compares to other rich text editor libraries.

### Key Changes
1. **FAQ Removal**: Deleted the FAQ file to focus on more relevant documentation.
2. **New Comparisons Guide**: Added a comprehensive guide comparing Markput with other editors, detailing features, strengths, limitations, and use cases.

### Benefits
- Enhances the clarity and relevance of the documentation by removing outdated materials.
- Provides users with valuable information to help them choose the right editor for their projects.
…pport resources

### Summary
- Deleted the 'Getting Help' documentation file to streamline content and reduce redundancy.
- Updated the 'Getting Started' guide to replace the 'Getting Help' link with a direct reference to GitHub Discussions for support.

### Key Changes
1. **File Removal**: Removed the 'Getting Help' markdown file to focus on more relevant support resources.
2. **Link Update**: Changed the support link in the 'Getting Started' guide to direct users to GitHub Discussions for community support.

### Benefits
- Enhances the clarity and relevance of the documentation by consolidating support resources.
- Provides users with a more direct and engaging way to seek assistance through community discussions.
… to streamline content and focus on essential information. This change enhances clarity by eliminating redundancy and directing users to relevant next steps.
…Getting Started' content to enhance clarity and focus on essential installation steps. The 'Getting Started' guide now provides a comprehensive overview of installing Markput and creating a basic editor example, while the sidebar configuration has been adjusted accordingly.
…debar configuration accordingly. This change streamlines the content by eliminating redundancy and focusing on essential guides.
…e guides to streamline content and enhance focus on core topics. This change improves clarity by eliminating redundancy and directing users to relevant resources.
…ntion to streamline content and focus on key advantages of Markput. This change enhances clarity by eliminating potential confusion regarding built-in accessibility features.
…re Concepts' and 'What is Markput?' from 'Why Markput' to streamline content and enhance focus on essential information. This change improves clarity by eliminating redundancy and directing users to key features of Markput.
…Markput

### Summary
- Renamed 'Core Concepts' to 'How It Works' in the sidebar for better alignment with content.
- Added 'lastUpdated' and 'editLink' properties to the Astro configuration for improved documentation management.
- Updated descriptions and added keywords across multiple documentation files to better reflect content and improve searchability.

### Key Changes
1. **Sidebar Update**: Changed the label of 'Core Concepts' to 'How It Works' for clearer navigation.
2. **Astro Configuration**: Introduced 'lastUpdated' and 'editLink' to facilitate user contributions and keep documentation current.
3. **Content Enhancements**: Revised descriptions and added relevant keywords in various documentation files to enhance discoverability.

### Benefits
- Improves user navigation and understanding of documentation.
- Facilitates easier contributions and updates to the documentation.
- Enhances the relevance and searchability of documentation content.
### Summary
- Added a JSDoc comment to the `MarkedInput` function for better clarity on its usage.
- Updated the API documentation to move `MarkedInput` from the Variables section to the Functions section, reflecting its correct categorization.
- Created a new markdown file for `MarkedInput` function documentation, detailing its type parameters and return values.
- Removed the outdated `MarkedInput` variable documentation to streamline content.

### Benefits
- Improves clarity and usability of the `MarkedInput` function documentation.
- Ensures accurate representation of the API structure for better developer experience.
### Summary
- Changed `ConfiguredMarkedInput` from a type alias to an interface for better type safety and clarity.
- Updated documentation links to reflect the new interface structure and improved organization.
- Removed outdated type alias documentation for `ConfiguredMarkedInput` to streamline content.

### Benefits
- Enhances type safety and clarity in the API.
- Improves documentation accuracy and usability for developers.
…atures

### Summary
- Revised the description to emphasize Markput as a lightweight React library for mentions, hashtags, and slash commands.
- Updated the section title from 'Why Markput?' to 'Features' for better alignment with content.
- Enhanced feature descriptions for clarity, including changes to terminology (e.g., 'Custom Syntax' to 'Flexible Patterns').
- Improved examples and use cases to better illustrate the library's capabilities.

### Benefits
- Increases clarity and usability of the documentation for developers.
- Provides a more structured overview of Markput's features and advantages.
…er inquiries

### Summary
- Revised the closing statement to encourage users to start discussions or open issues on GitHub for questions or bugs.
- Enhanced the call to action for better engagement with the community.

### Benefits
- Improves user support accessibility, fostering a more interactive and responsive community around Markput.
…ement

### Summary
- Updated the description to provide a more concise overview of installing Markput and building a mentions editor.
- Streamlined the installation instructions and requirements for better readability.
- Enhanced the step-by-step guide for creating a basic mentions editor with autocomplete functionality.

### Benefits
- Improves user experience by making the documentation more accessible and easier to follow for new users.
### Summary
- Added React integration to the Astro configuration for improved component functionality.
- Updated `package.json` to include React and related type definitions.
- Introduced new demo components (`BasicDemo`, `Step1Demo`, and `DemoWrapper`) to showcase the usage of the `rc-marked-input` library.
- Enhanced the 'Getting Started' documentation to include interactive demos, improving user engagement and understanding of the mention editor functionality.

### Benefits
- Provides a more comprehensive introduction to using Markput with React, facilitating a better onboarding experience for developers.
### Summary
- Removed placeholder text from `BasicDemo` for a cleaner interface.
- Enhanced `DemoWrapper` to accept raw code as a prop, improving code display in documentation.
- Simplified `Step1Demo` by removing unnecessary elements and streamlining the component structure.
- Updated 'Getting Started' documentation to utilize the new `DemoWrapper` format, enhancing the presentation of demo code.

### Benefits
- Provides a more polished user experience in demo components and improves the clarity of the documentation for new users.
…o presentation

### Summary
- Deleted the BasicDemo component to streamline the demo structure.
- Added CodePreview component to facilitate better code display and interaction in documentation.
- Updated Step1Demo to improve interactivity with mention clicks.
- Introduced Step2Demo and Step3Demo components to showcase autocomplete and custom overlay functionalities.

### Benefits
- Enhances the user experience by providing clearer and more interactive demo components, improving the overall documentation quality.
### Summary
- Updated `Step1Demo` to simplify the mention format and improve interactivity.
- Refactored `Step2Demo` to utilize a separate `Mark` component for better code organization.
- Enhanced `Step3Demo` by creating a reusable `Mark` component and integrating a custom overlay.

### Benefits
- Improves code readability and maintainability while enhancing the user experience in demo interactions.
### Summary
- Introduced a new `User` component to display user avatars and logins.
- Implemented user search functionality using GitHub's API to fetch and display user suggestions based on input.
- Updated the overlay to utilize the new user data, improving the autocomplete experience.

### Benefits
- Enhances interactivity and user experience in the demo by allowing real-time user search and selection.
### Summary
- Updated the `User` component to adjust the image size and styling for better visual consistency.
- Simplified the class names in the `CustomOverlay` component to enhance readability and maintainability.

### Benefits
- Enhances the overall appearance and usability of the demo, contributing to a more polished user experience.
…rove consistency

### Summary
- Changed the term "Markup Pattern" to "Markup" for clarity.
- Updated "Mark Component" to "Mark" to better reflect its role as a React component rendering the markup.

### Benefits
- Enhances the clarity and consistency of the documentation, making it easier for users to understand core concepts.
### Summary
- Simplified the sidebar configuration in `astro.config.ts` by removing redundant entries and improving organization.
- Deleted the `glossary.md` file to streamline documentation and avoid redundancy.
- Introduced a new `how-it-works.md` file to provide a comprehensive overview of Markput's functionality and architecture.

### Benefits
- Enhances the clarity and usability of the documentation, making it easier for users to navigate and understand core concepts of Markput.
… markup and overlay functionality

### Summary
- Added comprehensive sections explaining how the markup pattern is parsed and rendered in the mention editor.
- Clarified the functionality of the `options` prop for the autocomplete feature, including its configuration and behavior.
- Expanded the description of the `useOverlay` hook, detailing its capabilities and how it integrates with custom overlays.

### Benefits
- Improves the clarity and depth of the documentation, making it easier for users to understand the inner workings of the mention editor and its features.
…amline content

### Summary
- Deleted the 'Common Patterns' and 'TypeScript Support' sections to reduce redundancy and focus on essential information.
- Maintained the core message and call to action for user engagement.

### Benefits
- Enhances the clarity and conciseness of the documentation, making it easier for users to find relevant information.
### Summary
- Revised the description of the mention interaction for better user understanding.
- Changed "Pattern" to "Markup" for consistency with terminology.
- Removed redundant keywords from the metadata to streamline content.

### Benefits
- Enhances the clarity and conciseness of the documentation, making it easier for users to engage with the content.
### Summary
- Updated terminology from "mention editor" to "marked text editor" for consistency.
- Revised explanations of markup parsing and rendering to improve user understanding.
- Clarified the functionality of the `options` prop and the `useOverlay` hook, emphasizing their roles in the editor.

### Benefits
- Improves the clarity and precision of the documentation, making it easier for users to grasp the features and functionality of Markput.
…ement

### Summary
- Updated the introduction to emphasize building interactive text with custom markup.
- Clarified the functionality of the `options` prop and the `useOverlay` hook, detailing their configurations and behaviors.
- Enhanced explanations of the `select` function and the `Mark` component's usage for better TypeScript support.

### Benefits
- Improves user understanding of the features and functionality of Markput, making the documentation more accessible and engaging.
…and performance

### Summary
- Converted both components to functional arrow components for a more concise syntax.
- Replaced `useState` with `defaultValue` in `MarkedInput` to simplify state management.
- Enhanced code clarity by removing unnecessary imports and restructuring component definitions.

### Benefits
- Improves code maintainability and readability, making it easier for future development.
…on for clarity

### Summary
- Converted `Step3Demo` to a functional arrow component and simplified state management by using `defaultValue` in `MarkedInput`.
- Revised the introduction in the 'Getting Started' documentation to enhance clarity and engagement, emphasizing the editor's functionality.

### Benefits
- Improves code readability and maintainability while making the documentation more accessible for users.
### Summary
- Updated the `Mark` prop in the `MarkedInput` component to destructure `value` and `meta` directly, enhancing readability.

### Benefits
- Improves code clarity and maintainability, making it easier for future development.
…stency

### Summary
- Clarified the preservation of original text as a simple string for easier backend integration.
- Added punctuation for consistency in the description of the item selection process.

### Benefits
- Enhances user understanding of the Markput functionality, making the documentation clearer and more precise.
…P badges

### Summary
- Modified the sidebar configuration to filter out WIP badges based on the development environment.
- Updated titles in various documentation files to include a WIP badge for better visibility of ongoing work.

### Benefits
- Improves the clarity of the sidebar presentation and highlights sections under development, enhancing user awareness of content status.
…on for clarity

### Summary
- Simplified the `markup` pattern in the `Step2Demo` component to use plain text.
- Revised the documentation to clarify the functionality of the `options` prop and the behavior of the `Suggestions` component.

### Benefits
- Enhances code readability and maintainability while improving user understanding of the Markput features.
### Summary
- Introduced a new feature for "Cross Selection" allowing seamless text selection across multiple marks.
- Updated various documentation files by removing live demo links to streamline content.
- Added a "Try It Live" section in the 'Getting Started' documentation to provide users with interactive examples.

### Benefits
- Enhances user engagement with the new cross selection feature and improves accessibility to practical examples in the documentation.
### Summary
- Updated `pnpm-lock.yaml` to include new dependencies and versions for React, Vite, and other packages.
- Added a new `vercel.json` configuration file for deploying the Storybook with Vercel.
- Modified `astro.config.ts` to integrate the Vercel adapter, enabling image service and web analytics.
- Updated `package.json` to include the Vercel adapter as a dependency.

### Benefits
- Ensures compatibility with the latest package versions and enhances deployment capabilities on Vercel.
### Summary
- Refactored the `ConfiguredMarkedInput` interface for better readability.
- Updated `.gitignore` to include `.vercel/` for deployment configurations.
- Cleaned up `astro.config.ts` by removing unnecessary whitespace.
- Enhanced the README.md with additional spacing for better formatting.
- Standardized formatting in various demo components and documentation files for consistency.

### Benefits
- Improves code readability and maintainability while enhancing the overall user experience with clearer documentation.
@vercel
Copy link

vercel bot commented Nov 27, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
marked-input Error Error Nov 27, 2025 7:52am

@Nowely Nowely merged commit 408c14c into next Nov 27, 2025
4 of 7 checks passed
@Nowely Nowely deleted the website branch November 27, 2025 07:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants